<template>
  <div class="applyFor">
    <div class="application" v-if="!isLogin || isLogin == ''">
      <div class="topTitle">
        <title-item title1st="欢迎加入 团洗平台 ，请填写申请信息"> </title-item>
      </div>
      <div class="Form">
        <van-form @failed="onFailed" @submit="onSubmit">
          <van-cell-group inset>
            <van-field name="uploader" label="上传头像" label-width="100" :rules="[{ required: true, message: '请上传头像图片' }]">
              <template #input>
                <van-uploader v-model="avatar" :max-count="1" :after-read="afterRead" @delete="deleteFile" />
              </template>
            </van-field>
            <!-- 通过 pattern 进行正则校验 -->
            <van-field v-model="name" name="name" label="卡经销商名称" label-width="105" placeholder="请输入卡经销商名称"
              :rules="[{ required: true, message: '请输入卡经销商名称' }]" />
            <!-- 通过 validator 进行函数校验 -->
            <van-field v-model="account" name="account" label-width="105" label="账户(手机号码)" placeholder="请输入手机号码"
              :rules="[{ validator, message: '请输入正确内容' }]" />
            <van-field v-model="password" type="password" name="password" label="密码" label-width="105" placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="address" is-link readonly label-width="105" name="address" label="签约区域"
              :rules="[{ required: true, message: '请选择城市' }]" placeholder="点击选择城市" @click="showPicker = true" />
            <van-field v-model="email" label-width="105" type="text" name="email" label="对账邮箱" placeholder="请输入对账邮箱"
              :rules="[{ required: true, message: '请填对账邮箱' }]" />
            <van-field v-model="account_number" label-width="105" type="text" name="account_number" label="收款账号"
              placeholder="请输入收款账号" :rules="[{ required: true, message: '请上传收款二维码' }]" />
            <van-field name="uploader1" label="收款二维码" label-width="100"
              :rules="[{ required: true, message: '请上传收款二维码' }]">
              <template #input>
                <van-uploader v-model="account_image" :max-count="1" :after-read="afterRead1" @delete="deleteFile1" />
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 105%)">
              提交
            </van-button>
          </div>
        </van-form>
        <van-popup v-model:show="showPicker" position="bottom">
          <van-area v-model="city" title="城市选择" :area-list="areaList" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
      </div>
    </div>
  </div>
  <div class="empt" v-if="isLogin">
    <van-empty description="您已加入卡经销商">
      <div style="margin: 16px;width: 90vw;" @click="goUser">
        <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 105%)">
          修改资料
        </van-button>
      </div>
    </van-empty>
  </div>
</template>

<script setup>
import TitleItem from "@/components/title-item/title-item.vue";
import { showToast } from 'vant';
import { uploadMaterialImg } from '@/services/upLoad'
// import 'vant/es/toast/style';
import { areaList } from '@vant/area-data';
import { regionserviceRego } from "@/services";
import { closeToast, showLoadingToast } from "vant";
import { ref } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter()
const name = ref("");
const account = ref("");
const password = ref("");
const address = ref("");
const email = ref("");
const account_number = ref("");
const showPicker = ref(false);
const avatar = ref([]);
const account_image = ref([]);
const imgList = ref([])//头像
const imgList1 = ref([])//收款二维码
let localInfo = localStorage.getItem('userinfo3')
let token = localInfo ? JSON.parse(localInfo).token : ''
let isLogin = ref(token)
const goUser = () => {
  router.push({
    path: '/alterUser',
  })
}
const deleteFile = (e, detail) => {
  // console.log(e,detail,'deleteFile')
  imgList.value.splice(detail.index, 1)
}
const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
  // console.log(selectedValues, selectedOptions, selectedIndexes)
  address.value = selectedOptions[0]?.text + selectedOptions[1]?.text + selectedOptions[2]?.text;
  // console.log(address.value)
  showPicker.value = false;
};
// const value4 = ref("");
// const pattern = /\d{6}/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) =>
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    val
  );

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const afterRead = async (fileData) => {
  avatar.status = 'uploading';
  avatar.message = '上传中...';
  var dataV = new FormData();//重点--使用formdata添加需要一起传的参数
  dataV.append("file", fileData.file);
  let res = await uploadMaterialImg(fileData)
  imgList.value.push(res.fullurl)
  fileData.message = "上传成功";
};
const afterRead1 = async (fileData) => {
  avatar.status = 'uploading';
  avatar.message = '上传中...';
  var dataV = new FormData();//重点--使用formdata添加需要一起传的参数
  dataV.append("file", fileData.file);
  let res = await uploadMaterialImg(fileData)
  imgList1.value.push(res.fullurl)
  fileData.message = "上传成功";
};
const deleteFile1 = (e, detail) => {
  imgList1.value.splice(detail.index, 1)
}
const onSubmit = async (val) => {
  console.log(val, '成功的值')
  const { name, password, account, email, address, account_number } = val
  const getAvtator = imgList.value.join()
  const account_image = imgList1.value.join()
  let Form = {
    name, password, account, email, address, account_number,account_image,
    avatar: getAvtator
  }
  // console.log(Form, 111)
  let res = await regionserviceRego(Form)
  showToast('注册成功，请等待后台审核');
  console.log(res)
}
</script>

<style lang="scss" scoped>
.applyFor {
  padding: 10px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  color: #1d1b20;
  padding-bottom: 50px;
  .topTitle {
    margin-left: -4px;
  }
}
</style>
